/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header :title="type | getCN">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <!-- <mescroll-vue
        class="mescroll_content"
        ref="mescroll"
        :down="mescrollDown"
        @init="mescrollInit"
      >-->
      <div ref="mescroll" class="mescroll">
        <ul id="dataList">
          <li v-for="(item,index) in list" :key="index" @click="goQuestion(item)">
            <p class="title">{{item.title}}</p>
            <div class="footer">
              <span style="margin-right: 20px;">
                总题量:
                <span style="padding:0 6px;color: red;">{{item.numbers}}</span>道
              </span>
              <span>
                已做:
                <span style="padding:0 6px;color: red;">{{item.joined}}</span>人
              </span>
            </div>
          </li>
        </ul>
      </div>
      <!-- </mescroll-vue> -->
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
// import MescrollVue from "mescroll.js/mescroll.vue";
import MeScroll from "mescroll.js";
import moment from "moment";
import {
  calendar_qus_list,
  plan_qus_list,
  chapter_qus_list,
  dayly_qus_list
} from "../../api/index.js";

let reqLis = {
  calendar: calendar_qus_list,
  plan: plan_qus_list,
  chapter: chapter_qus_list,
  dayly: dayly_qus_list
};

export default {
  data() {
    return {
      type: "",
      list: [],
      mescroll: {},
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false
      },
      //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        page: {
          num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        auto: false,
        htmlNodata: '<p class="upwarp-nodata">-- 没有更多内容了 --</p>',
        callback: this.upCallback,
        empty: {
          // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
          warpId: "content", // 父布局的id;
          tip: "暂无相关数据~", // 提示
          lazyLoad: {
            use: false // 是否开启懒加载,默认false
          }
        }
      }
    };
  },
  mounted() {
    this.type = this.$router.history.current.query.type;
    self = this;
    self.mescroll = new MeScroll(self.$refs.mescroll, {
      down: {
        auto: true,
        callback: self.downCallback,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      },
      up: {
        auto: false,
        page: {
          num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        callback: self.upCallback, //上拉回调
        isBounce: false, //此处禁止ios回弹,
        htmlNodata:
          "<p style='text-align: center; color: #ccc; font-size: 12px; padding: 10px;'>-- 没有更多数据了... --</p>",
        empty: {
          //配置列表无任何数据的提示
          warpId: "dataList",
          tip:
            "<p style='text-align: center; color: #ccc; font-size: 12px; padding: 10px;'>亲,暂无相关数据哦~</p>"
        }
      }
    });
    // this.mescroll.triggerDownScroll();
  },
  methods: {
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 下拉刷新
    async downCallback(mescroll) {
      let p = JSON.parse(localStorage.getItem("selectedProject"));
      let type = this.$router.history.current.query.type;
      const result = await reqLis[type]({
        sid: p.id,
        pageIndex: 1,
        pageSize: 10
      });
      if (result.code === 1) {
        this.list = result.data.items;
        this.$nextTick(() => {
          mescroll.endSuccess(result.data.total);
        });
      } else {
        this.$vux.toast.show(`获取免费列表失败:${result.msg}`);
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    // 上拉加载
    async upCallback(page, mescroll) {
      let p = JSON.parse(localStorage.getItem("selectedProject"));
      let type = this.$router.history.current.query.type;
      const result = await reqLis[type]({
        pageIndex: page.num,
        pageSize: page.size,
        sid: p.id
      });
      if (result.code === 1) {
        const arr = result.data.items || [];
        this.list = this.list.concat(arr);
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length);
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    goQuestion(item) {
      // isExam 1不是考试 2是考试
      if (this.type === "calendar" || this.type === "plan") {
        // 历年真题或者模拟考试则有封面
        this.$router.push({
          path: "/qusCover",
          query: { id: item.id, isExam: 1, type: this.type, status: item.status }
        });
      } else {
        // 如果是每日一练的话则没有封面,直接跳到答题页面
        this.$router.push({
          path: "/question",
          query: { type: this.type, id: item.id, status: item.status }
        });
      }
    }
  },
  components: { Header, }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    ul {
      padding: 0 10px;
      background: @white;
      li {
        background: @white;
        border-bottom: 1px solid @border-base;
        padding: 10px 0;
        .title {
          padding-bottom: 5px;
          .mix-text-overflow();
        }
        .footer {
          color: @font-secondary;
        }
      }
    }
  }
}
</style>
